import '../lib/jquery.js'
import { ajax } from '../utils/ajax.js'
import { nameTest, pwdTest, nickTest } from "../utils/reg.js";

$(document).ready(function() {
  $('.error').hide();// 隐藏页面加载时可能显示的所有错误消息

  $('form').submit(async function(event) {
    event.preventDefault();// 阻止表单默认提交行为

    // 获取表单输入的值并去除首尾空格
    var username = $('.username').val().trim();// 用户名
    var password = $('.password').val().trim();// 密码
    var rpassword = $('.rpassword').val().trim(); // 确认密码
    var nickname = $('.nickname').val().trim();// 昵称

    if (username === '' || password === '' || rpassword === '' || nickname === '') {
      showAlert('表单不能为空');// 如果任何一个输入框为空，则显示警告消息
      return;// 终止表单提交
    }

    if (!nameTest(username)) {
      showAlert('用户名格式错误');
      return;
    }

    if (!pwdTest(password)) {
      showAlert('密码格式错误');
      return;
    }

    if (password !== rpassword) {
      showAlert('两次密码不一致');
      return;
    }

    if (!nickTest(nickname)) {
      showAlert('昵称格式错误');
      return;
    }

    $('.error').hide(); // 隐藏之前可能显示的错误消息

    // 发送数据到服务器
    try {
      let data = { username, password, rpassword, nickname };// 准备发送的数据对象，不包含确认密码
      let response = await ajax.post('/users/register', data);

      if (response.data.code !== 1) {
        $('.error').text('注册失败，请稍后再试。').show();// 如果注册失败，则显示注册失败的错误消息
        return;
      }

      // 注册成功，跳转到登录页面
      alert('注册成功，点击确定跳转到登录页面');
      location.href = './login.html';
    } catch (error) {
      console.error('注册失败:', error);// 捕获并打印注册失败的错误信息
      $('.error').text('注册失败，请稍后再试。').show();// 显示注册失败的错误消息
    }
  });
  // 显示警告提示框的函数
  function showAlert(message) {
    var alertDiv = $('<div></div>')
      .text(message)
      .css({
        'position': 'fixed',
        'top': '50%',
        'left': '50%',
        'transform': 'translate(-50%, -50%)',
        'background-color': 'rgba(0, 0, 0, 0.6)', // 半透明黑色
        'color': 'white',
        'padding': '10px 20px',
        'border-radius': '5px',
        'z-index': '1000',
        'text-align': 'center',
        'font-size': '16px'
      })
      .appendTo('body');

    setTimeout(function() {
      alertDiv.fadeOut(500, function() {
        $(this).remove();
      });
    }, 2000); // 2秒后自动消失
  }
});
